<script setup lang="ts">
interface Props {
  modalName: string
}
defineProps<Props>()
</script>

<template>
  <div class="custom-modal">
    <img src="@/assets/img/index/close.png" alt="" class="close" @click="$emit('close')" />
    <div class="modal-name">{{ modalName }}</div>
    <div class="content">content</div>
  </div>
</template>

<style scoped lang="scss">
.custom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: url('@/assets/img/index/modal-bg.png') no-repeat;
  background-size: 100%;
  width: 1438px;
  height: 845px;
  z-index: 999;
  padding: 67px 15px 20px;
  .modal-name {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 22px;
    color: #79c5ff;
  }
  .close {
    width: 27px;
    height: 29px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
  .content {
    .header {
      height: 56px;
      background: #3265ab;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      display: flex;
      align-items: center;
      & > div {
        flex: 1;
        text-align: center;
      }
    }
  }
  .mySwiper {
    height: 700px;
    .swiper-slide {
      height: 80px;
      display: flex;
      align-items: center;
      .title {
        padding: 0 5px;
      }
      &:nth-child(odd) {
        background: rgba(71, 117, 189, 0.3);
      }
      &:nth-child(even) {
        background: rgb(28, 68, 130);
      }
      & > div {
        flex: 1px;
        text-align: center;
      }
    }
  }
}
</style>
